//导航首页
import React, {Component} from 'react'
import {View, Text, FlatList, TouchableOpacity, ScrollView} from 'react-native'
import Loading from '../common/loading'
import styles from '../../configs/styles'
import {I18n} from '../../configs/enumeration'
import {GetNoticesApi} from '../../configs/api'
import {connect} from 'react-redux'

class homePageIndex extends Component {

  //初始化props和state
  constructor(props) {
    super(props);
    this.state = {
      data: [], //数据源
      broadcastData: [],
      loading: true, //是否正在加载
      page: 1,
      flipping: false
    }
  }

  componentWillReceiveProps () {
    this.getData()
  }
  componentDidMount() {
    this.getData()
  }

  getData = () => {
    GetNoticesApi(this.state.page).then((data) => {
      let _data = this.state.data;
      _data.push(...data.notices);
      this.setState({
        data: _data,
        broadcastData: data.broadcasts,
        loading: false,
        flipping: false
      })
    })
  };

  refresh = () => {
    this.setState({
      page: 1,
      data: []
    }, () => {
      this.getData()
    })
  };

  //翻页
  Flip = () => {
    if (this.state.flipping) return;
    this.setState({flipping: true, page: this.state.page + 1}, () => {
      this.getData()
    })
  };

  //用于给FlatList的每一条item指定一个key
  _keyExtractor = (item, index) => index;

  _applyShow = (apply_id) => {
    return this.props.navigation.navigate('apply_show', {apply_id: apply_id})
  };

  //获取数据的颜色
  getColor = (type) => {
    switch (type) {
      case 'apply':
        return 'yellow';
      case 'Approve':
        return 'green';
      case 'Repair':
        return 'orange';
      case 'Assign':
        return 'purple';
      case 'Schedule':
        return '#FFC8B4';
      default:
        return 'white'
    }
  };

  //每一条item的模板
  _renderItem = ({item}) => {
    return (
      <TouchableOpacity style={styles.itemContainer} onPress={() => this._applyShow(item.id)}>
        <View style={{backgroundColor: this.getColor(item.type), padding: 10}}>
          <Text>{I18n(item.type)}</Text>
        </View>
        <View style={{flex: 1}}>
          <Text style={{margin: 5}}>{item.business_name}</Text>
          <Text style={{margin: 5}}>{item.remark}</Text>
        </View>
        <View>
          <Text style={{margin: 5}}>{item.created_at}</Text>
          <Text style={{margin: 5}}>{item.status_name}</Text>
        </View>
      </TouchableOpacity>
    )
  };

  //首页顶部公告横向列表
  _renderBroadcastItem = (item, index) => {
    return (
      <TouchableOpacity style={styles.broadcastContainer} onPress={() => {
        this.props.navigation.navigate('broadcastShow', {broadcast_id: item.id})
      }} key={index}>
        <View>
          <Text style={{margin: 5}}>{item.title}</Text>
        </View>
        <View>
          <Text style={{margin: 5}}>{item.content}</Text>
        </View>
        <View style={{flexDirection: 'row'}}>
          <Text style={{margin: 5}}>{item.department_name}</Text>
          <Text style={{margin: 5}}>{item.created_at}</Text>
        </View>
      </TouchableOpacity>
    )
  };

  render() {
    const {loading, data, broadcastData} = this.state;
    if (loading) {
      return <Loading/>
    } else {
      return (
        <View bounces={false} style={{flex: 1}} key={this.props.user.school_id}>
          <ScrollView horizontal={true}>
            {broadcastData.map((data, index) => {
              return this._renderBroadcastItem(data, index)
            })}
          </ScrollView>

          <TouchableOpacity style={{alignItems: 'flex-end', marginBottom: 8}} onPress={() => {
            this.props.navigation.navigate('broadcastList')
          }}>
            <Text>
              {I18n('more_info')}
            </Text>
          </TouchableOpacity>

          <FlatList
            data={data}
            extraData={this.props.user}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            refreshing={loading}
            onRefresh={this.refresh}
            onEndReachedThreshold={0.1}
            onEndReached={this.Flip}
          />
        </View>
      )
    }

  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
};

export default connect(mapStateToProps)(homePageIndex)